<template>
    <div class="card-info"
        @click.stop="toPage">
        <img :src="info.imgUrl"
            class="imgs"
            @mouseenter.stop="enter"
            @mouseleave="leave">
        <span class="stitle">{{info.movieName}}</span>
        <div class="xingxing">
            <el-rate v-model="info.movieNumber"
                disabled
                show-score
                text-color="#ff9900">
            </el-rate>
        </div>
        <div class="btn">
            <button class="buy">选座购票</button>
        </div>
        <div class="details"
            v-if="condition">
            <div class="title">
                <span>{{info.movieName}}</span>
                <span class="date">{{info.time}}</span>
            </div>
            <div class="deta-xing">
                <div class="el-xing">
                    <el-rate v-model="info.movieNumber"
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template="{value}">
                    </el-rate>
                </div>
                <span class="evaluate">{{`(${info.PeopleNumber}评价)`}}</span>
            </div>
            <div class="add">
                <span>{{`${info.minute}分钟`}}</span>
                <span>{{info.address}}</span>
            </div>
            <div class="director">
                <span>导演</span>
                <span>{{info.director}}</span>
            </div>
            <div class="performer">
                <span>主演</span>
                <span>{{info.performer}}</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "card-info",
    data() {
        return {
            condition: false
        }
    },
    props: {
        info: {
            type: Object,
            required: true,
            default: null
        }
    },
    methods: {
        enter() {
            this.condition = true
        },
        leave() {
            this.condition = false
        },
        toPage() {
            this.$router.push({ path: "/film_details" })
        }
    }
}
</script>
<style lang="less">
    .card-info {
        margin-left: 25px;
        width: 115px;
        height: 250px;
        text-align: center;
        position: relative;
        .imgs {
            display: block;
            width: 115px;
            height: 163px;
        }
        .stitle {
            display: inline-block;
            width: 95px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 14px;
            height: 20px;
            line-height: 24px;
        }
        .xingxing {
            .el-rate__icon {
                font-size: 12px;
                margin-right: 2px;
                color: #9199aa;
                -webkit-transition: 0.3s;
                transition: 0.3s;
            }
        }
        .btn {
            text-align: center;
            .buy {
                border: 1px solid #ccc;
                font-size: 12px;
                width: 80px;
                height: 25px;
                border: 0px;
                border-radius: 3px;
                cursor: pointer;
                color: #fff;
                background-color: #268dcd;
            }
            .buy:hover {
                background-color: #74c1f2;
            }
        }
        .details {
            width: 200px;
            height: 170px;
            text-align: left;
            position: absolute;
            top: 0px;
            border: 1px solid #ccc;
            left: 125px;
            z-index: 999;
            font-size: 14px;
            background-color: #ffffff;
            padding: 20px 25px;
            div {
                font-size: 14px;
                margin-bottom: 10px;
            }
            .title {
                font-size: 16px;
                .date {
                    font-size: 16px;
                    color: rgb(83, 83, 83);
                    margin-left: 10px;
                }
            }
            .deta-xing {
                height: 20px;
                .el-rate__icon {
                    font-size: 12px;
                    margin-right: 2px;
                    color: #9199aa;
                    -webkit-transition: 0.3s;
                    transition: 0.3s;
                }
                .el-xing {
                    display: inline-block;
                }
                .evaluate {
                    font-size: 13px;
                }
            }
        }
    }
</style>
